<template>
  <el-container class="home">
    <MenuAside />
    <el-container class="container">
      <el-header class="header">
        <div class="header-main">
          <div class="header-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentTitle }}-{{ editableTabsValue }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-aside">
            <UserAvatar />
          </div>
        </div>
        <div class="header-menus">
          <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @tab-click="handleClickTab" closable
            @tab-remove="removeTab">
            <el-tab-pane v-for="item in useVisitedRoutes().visitedRoutes" :key="item.path" :label="item.title"
              :name="item.name" />
          </el-tabs>
        </div>
      </el-header>
      <el-main class="main">
        <router-view v-slot="{ Component, route }">
          <Transition name="fade" mode="out-in">
            <component :is="Component" :key="route.path" />
          </Transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, nextTick, computed } from 'vue'
import MenuAside from '@/components/Home/MenuAside.vue'
import UserAvatar from '@/components/Home/UserAvatar.vue'
import { useVisitedRoutes, useCreateView, } from '@/stores'
import { removeVisitedRoutes } from '@/utils'
import { useRouter } from 'vue-router'

const router = useRouter()
const editableTabsValue = ref(useCreateView().createView)

const currentTitle = computed(() => {
  const item = useVisitedRoutes().visitedRoutes.find((e: any) => e.name === useCreateView().createView)
  return item ? item.title : ''
})

/**
 * 从访问历史中移除指定名称的标签页
 *
 * @param targetName 要移除的标签页名称
 */
const removeTab = (targetName: any) => {
  console.log(targetName)
  const tabs = useVisitedRoutes().visitedRoutes
  let activeName = editableTabsValue.value
  // 如果关闭的是当前激活的标签页，则切换到下一个标签页
  if (activeName === targetName) {
    tabs.forEach((tab: any, index: number) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  editableTabsValue.value = activeName
  const item = useVisitedRoutes().visitedRoutes.find((e: any) => e.name === activeName)
  if (item) {
    router.push(item.path)
    useCreateView().saveState(activeName)
    removeVisitedRoutes({ name: targetName })
  }
}
/**
 * 点击标签页的处理函数
 *
 * @param tab 标签页对象
 */
const handleClickTab = (tab: any) => {
  const routes = useVisitedRoutes().visitedRoutes.find((item: any) => item.name === tab.paneName)

  if (routes) {
    useCreateView().saveState(tab.paneName)
    router.push(routes.path)
  }
}

watch(
  () => useCreateView().createView,
  (newValue) => {
    editableTabsValue.value = newValue
  }
)

onMounted(async () => {
  nextTick(() => {
    const closeIcon = document.querySelectorAll('.el-tabs__item .is-icon-close')[0] as HTMLElement
    if (closeIcon) {
      closeIcon.style.opacity = '0'
    }
  })
})
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;

  .header {
    height: 90px;

    .header-main {
      display: flex;
      padding: 20px 0 0;

      .header-breadcrumb {
        flex: 1;
        display: flex;
        align-items: center;
      }

      .header-aside {}
    }

    .header-menus {
      flex: 1;
    }
  }

  .container {
    flex: 1;
    // .aside {
    // }
    // .main {
    // }
    border-left: 1px solid var(--el-border-color);
  }
}

/* 定义 fade 动画 */
.fade-enter-active {
  transition: all 0.3s ease-out;
}

.fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
